<template>
	<view class="content">
		<!-- F1轮播图 -->
		<swiper class="swipwe" :indicator-dots="true" indicator-color="rgba(255,255,255,.5)"
			indicator-active-color="#fff" :autoplay="true" duration="300">
			<swiper-item v-for="item in carousels" :key="item.cid">
				<view class="swipwe-item">
					<image :src="baseURL+item.pic" @click="jump(item.href)">
				</view>
			</swiper-item>
		</swiper>
		<!-- F2 功能菜单 -->
		<uni-grid :column="4" :showBorder="false" :square="true" class="func-menu">
			<uni-grid-item v-for="item in menuItems" :key="item.iid">
				<view class="menu-item" @click="jump(item.href)">
					<image :src="baseURL+item.pic" mode="widthFix"></image>
					<text>{{item.title}}</text>
				</view>
			</uni-grid-item>
		</uni-grid>
		<!-- F3 商业服务 -->
		<uni-card title="| 商业服务" :is-full="true" :border="false" class="card">
			<view class="service">
				<!-- 房屋租售 -->
				<view class="service-item">
					<!-- 左侧文字 -->
					<view class="txt">
						<text>房屋租售</text>
						<view>
							<navigator>租房</navigator>
							<navigator>短租</navigator>
						</view>
					</view>
					<!-- 右侧图片 -->
					<image src="/static/img/chuzu.png" mode="" class="img"></image>
				</view>
				<!-- 便民服务 -->
				<view class="service-item">
					<!-- 左侧文字 -->
					<view class="txt">
						<text>便民服务</text>
						<view>
							<navigator>便利店</navigator>
							<navigator>超市</navigator>
						</view>
					</view>
					<!-- 右侧图片 -->
					<image src="/static/img/bianmin.png" mode="" class="img"></image>
				</view>

			</view>
		</uni-card>
		<!-- F4 社区活动 -->
		<uni-card title="| 社区活动" :is-full="true" :border="false" class="card2">
			<uni-list>
				<uni-list-item link="navigateTo" to="/pages/ad/ad" class="activities-item" v-for="item in activities"
					:key="item.aid">
					<!-- 通过插槽添加内容 -->
					<template v-slot:body>
						<view class="activities-body">
							<text class="title">
								{{item.title}}
							</text>
							<text class="content">
								{{item.content}}
							</text>
							<text class="time">
								{{item.startTime | formatDate()}}
							</text>
						</view>
					</template>
					<template v-slot:footer>
						<image class="pic" :src="baseURL+item.pic" mode="widthFix"></image>
					</template>
				</uni-list-item>
			</uni-list>
		</uni-card>
	</view>
</template>

<script>
	import {
		indexData,
		baseURL
	} from '../../service';

	export default {
		data() {
			return {
				baseURL,
				carousels: [], //轮播图数据列表
				menuItems: [], //功能菜单列表
				activities: [], //社区活动列表

			}
		},
		// 过滤器
		// filters: {
		// 	// formatDate(time) {
		// 	// 	//将时间戳放到Date对象中
		// 	// 	const d = new Date(time)
		// 	// 	let year = d.getFullYear() + 1
		// 	// 	let month = d.getDate()
		// 	// 	let date = d.getDate()
		// 	// 	let hour = d.getHours()
		// 	// 	let minute = d.getMinutes()
		// 	// 	return `${year}年${month}月${date}日  ${hour<10?'0'+hour:hour}:${minute<10?'0'+minute:minute}`
		// 	// }
		// },
		async onLoad() {
			uni.showToast({
				title: '欢迎回来',
				icon: 'none',
				duration: 3000
			})
			const data = await indexData()
			//将接口返回数据存储
			this.carousels = data.carousels
			this.menuItems = data.menuItems
			this.activities = data.activities
			console.log(this.carousels);
		},
		methods: {
			jump(url) {
				console.log(url);
				uni.navigateTo({
					url,
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	// 轮播图
	.swipwe {
		.swipwe-item>image {
			width: 750rpx;
			height: 300rpx;
		}
	}

	// 功能菜单
	.func-menu {
		background-color: $uni-bg-color;
		margin-top: $uni-spacing-col-base;

		.menu-item {
			//弹性布局改为纵向
			flex-direction: column;
			//交叉轴居中对齐
			align-items: center;
			height: 100%;
			// 主轴居中对齐
			justify-content: center;

			>image {
				width: 35%;
				margin-bottom: $uni-spacing-col-base;
			}
		}
	}

	// 商业服务

	.card {
		flex-direction: column;
		margin-top: $uni-spacing-col-base !important;


		.service {
			width: 100%;


			.service-item {
				padding-top: $uni-spacing-col-sm;
				padding-bottom: $uni-spacing-col-sm;
				flex: 1;
				justify-content: space-between;

				&:first-child {
					padding-right: $uni-spacing-row-base;
				}

				&:last-child {
					padding-left: $uni-spacing-row-base;
				}

				.txt {
					flex-direction: column;

					text {
						font-weight: bold;
						font-size: $uni-font-size-lg;
						margin-bottom: $uni-spacing-col-sm;
						color: $zh-theme-grey-dark;
					}

					navigator {
						margin-right: $uni-spacing-row-sm;
					}
				}

				.img {
					width: 150rpx;
					height: 90rpx;
				}
			}
		}
	}

	//社区活动

	.card2 {
		flex-direction: column;

		.activities-item {

			.activities-body {
				flex-direction: column;
				width: 420rpx;

				.title {
					font-size: $uni-font-size-base;
					color: $zh-theme-grey-dark;
					font-weight: bold;
					//调用混入
					@include ellipse-1()
				}

				.content {
					font-size: $uni-font-size-base;
					@include ellipse-1();
					margin-bottom: $uni-font-size-base;
				}

				.time {
					font-size: $uni-font-size-sm;
					color: $zh-theme-grey-light;

				}
			}

			.pic {
				width: 240rpx;
				margin-left: $uni-spacing-row-base;
			}
		}
	}
</style>